<template>
	<view>
		<custom-header title="详情" sticky />
		<!-- 编辑 -->
		<view class="_wrap" v-if="status == 1 || status == 2">
			<!-- 花材信息 -->
			<view class="flower_info">
				<view class="title">
					<view class="title-text">花材信息</view>
				</view>
				<view class="info">
					<view class="supplier_base">
						<view class="supplier_name">一把火花卉</view>
						<view class="base_name">红塔基地</view>
					</view>
				</view>
				<view class="info">
					<view class="info_item">
						卡布奇诺：8扎
					</view>
				</view>
				<view class="info">
					<view class="info_item">
						申请时间：2025-06-28:15:24:11
					</view>
				</view>
				<view class="info">
					<view class="phone" @click="makeCall">
						<view class="label">商户电话</view>  
						<view class="value">17849466865</view>  
						<view class="icon">
							<image class="phone-icon" src="/static/common/phone1.png" mode="aspectFit"/>
						</view>
					</view>
					<view class="btn" @click="handleReject" v-if="status == 1">驳回</view>
					<view class="btn" @click="handleSoldOut" v-if="status == 2">下架</view>
				</view>
			</view>
			<!-- 等级选择 -->
			<view class="form_wrap">
				<view class="label_title">
					等级选择<text class="required">*</text>
				</view>
				<view class="gread_list_wrap">
					<view 
						class="list" 
						:class="{active:item.value == grade}"
						v-for="(item,index) in gradeList" 
						:key="index"
						@click="handleSelectGrade(item.value)">
						{{ item.label }}
					</view>
				</view>
			</view>
			<!-- 数量 -->
			<view class="form_wrap">
				<view class="label_title">
					数量<text class="required">*</text>
				</view>
				<view class="number_wrap">
					<view class="left">
						<view class="text">实际数量</view>
						<view class="input">
							<input type="number" v-model="number">
						</view>
						<view class="text">扎</view>
					</view>
					<view class="right">
						申请数量：8扎
					</view>
				</view>
			</view>
			<!-- 价格 -->
			<view class="form_wrap">
				<view class="label_title">
					价格<text class="required">*</text>
				</view>
				<view class="number_wrap">
					<view class="left">
						<view class="text">商品价格</view>
						<view class="input">
							<input type="number" v-model="price">
						</view>
						<view class="text">元/扎</view>
					</view>
					<view class="right">
						排名第一：8.88元/扎
					</view>
				</view>
			</view>
		</view>
		<view class="footer_btn_wrap fixed" v-if="status == 1 || status == 2">
			<view class="btn_wrap">
				<button
					size="default" 
					type="default" 
					class="btn"
					@click="handleSubmit">
						{{ status == 1?'确定上架':'修改上架' }}
					</button>
			</view>
		</view>
		
		<!-- 详情 -->
		<view class="detail_wrap" v-else>
			<!-- 花材信息 -->
			<view class="flower_info">
				<view class="title">
					<view class="title-text">花材信息</view>
				</view>
				<view class="info">
					<view class="supplier_base">
						<view class="supplier_name">一把火花卉</view>
						<view class="base_name">红塔基地</view>
					</view>
				</view>
				<view class="info">
					<view class="info_item">
						卡布奇诺：8扎
					</view>
				</view>
				<view class="info">
					<view class="info_item">
						申请时间：2025-06-28:15:24:11
					</view>
				</view>
				<view class="info">
					<view class="phone" @click="makeCall">
						<view class="label">商户电话</view>  
						<view class="value">17849466865</view>  
						<view class="icon">
							<image class="phone-icon" src="/static/common/phone1.png" mode="aspectFit"/>
						</view>
					</view>
				</view>
				<view class="info">
					<view class="info_item">
						等级：B级
					</view>
				</view>
				<view class="info">
					<view class="info_item">
						数量：8扎
					</view>
				</view>
				<view class="info">
					<view class="info_item">
						均价：9.88元/扎
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 弹出层提示 -->
		<custom-toast 
			:show="isShowToast"
			:config="toastConfig"
			@cancel="hideToast"
			@confirm="confirmToast" />
	</view>
</template>

<script setup>
	import { ref,reactive,computed,onMounted } from 'vue'
	// 弹出层操作
	import useToast from '../../utils/toast.js'
	const { isShowToast,toastConfig,showToast,hideToast } = useToast()
	// 弹出层确认
	const confirmToast = (data)=>{
		console.log(data)
		// 确认下架
		if(data?.type == 'soldOut'){
			setTimeout(()=>{
				hideToast()
			},800)
		}
		// 上架
		else if(data?.type == 'putaway'){
			setTimeout(()=>{
				hideToast()
			},800)
		}
		// 返回
		else if(data?.type == 'back'){
			hideToast()
			uni.navigateBack()
		}
		else{
			hideToast()
		}
	}
	
	// 页面状态 1：待上架 2交易中 3已完成
	const status = ref(1)
	
	// 等级选择
	const grade = ref('')
	const gradeList = ref([
		{value:1,label:'A级'},
		{value:2,label:'B级'},
		{value:3,label:'C级'},
		{value:4,label:'D级'},
		{value:5,label:'E级'},
		{value:6,label:'O级'},
	])
	const handleSelectGrade = (value)=>{
		grade.value = value
	}
	// 数量
	const number = ref(5)
	// 价格
	const price = ref(9.88)
	
	// 上架
	const handleSubmit = ()=>{
		showToast({
			message:`确定要${status.value==2?'修改':''}上架吗？`,
			showCancel:true,
			data:{
				type:'putaway'
			}
		})
	}
	// 下架
	const handleSoldOut = ()=>{
		showToast({
			message:'确定要下架吗？',
			showCancel:true,
			data:{
				type:'soldOut'
			}
		})
	}
	// 驳回
	const handleReject = ()=>{
		showToast({
			message:'确定要驳回吗？',
			showCancel:true,
			data:{
				type:'reject'
			}
		})
	}
	
	
	// 拨打电话
	const makeCall = () => {
	  uni.makePhoneCall({
	    phoneNumber: '10086'
	  })
	}
	
	onMounted(() => {
	  // 获取页面参数
	  const pages = getCurrentPages()
	  const currentPage = pages[pages.length - 1]
	  const options = currentPage.options
	  console.log(options)
	  
	  // 根据实际字段自定义调整
	  // 状态（默认待上架）
	  if(options.activeTabIndex){
		  status.value = options.activeTabIndex
	  }
	})
</script>

<style lang="scss">
	._wrap{
		padding: 0 24rpx 140rpx;
		font-size: 28rpx;
		color: #666;
	}
	.detail_wrap{
		padding: 0 24rpx 40rpx;
		font-size: 28rpx;
		color: #666;
	}
	.flower_info,
	.form_wrap{
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 24rpx;
		padding: 0 24rpx 24rpx;
		.title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 32rpx;
			.title-text{
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
		}
	}
	.flower_info{
		.info{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 24rpx;
			font-size: 28rpx;
			color: #666;
			.supplier_base{
				display: flex;
				align-items: center;
				.base_name{
					padding: 2rpx 8rpx;
					border: 1px solid #F5564D;
					color: #F5564D;
					font-size: 20rpx;
					border-radius: 8rpx;
					margin-left: 8rpx;
				}
			}
			.grade{
				color: #F5564D;
			}
			.phone{
				display: flex;
				align-items: center;
				.value{
					color: #4298FF;
					padding: 0 8rpx;
				}
				.icon{
					width: 18rpx;
					height: 18rpx;
					display: flex;
				}
			}
			.btn{
				width: 120rpx;
				text-align: center;
				height: 49rpx;
				line-height: 49rpx;
				border-radius: 10rpx;
				border: 1px solid #4298FF;
				font-size: 28rpx;
				color: #4298FF;
			}
		}
	}
	.form_wrap{
		.label_title{
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			padding-top: 32rpx;
			.required{
				color: #F5564D;
			}
		}
		.gread_list_wrap{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.list{
				width: 180rpx;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 10rpx;
				background: #F5F6FA;
				border: 1px solid #F5F6FA;
				box-sizing: border-box;
				margin-top: 32rpx;
				&.active{
					border: 1px solid #F5564D;
					background-color: #FCEEF0;
					color: #F5564D;
				}
			}
		}
		.number_wrap{
			padding-top: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				display: flex;
				align-items: center;
				.input{
					width: 98rpx;
					height: 56rpx;
					border-radius: 10rpx;
					border: 1px solid #D7D7D7;
					margin: 0 24rpx;
					input{
						width: 100%;
						height: 100%;
						color: #666;
						text-align: center;
					}
				}
			}
		}
	}
</style>
